<template>
  <div class="bg-white p-6 rounded-lg shadow">
    <h2 class="text-lg font-semibold mb-4">查询历史</h2>
    <div v-if="history.length > 0">
      <div
        v-for="(item, index) in history"
        :key="index"
        class="p-4 border-b last:border-b-0 hover:bg-gray-50 group relative"
        :class="{ 'pointer-events-none opacity-50': loadingIndex === index }"
      >
        <div class="flex justify-between items-start">
          <div class="flex-1 cursor-pointer" @click="handleSelect(item, index)">
            <div class="text-sm text-gray-600">{{ item.query }}</div>
            <div class="mt-2 text-xs text-gray-400">
              {{ new Date(item.timestamp).toLocaleString() }}
            </div>
          </div>
          <el-button
            type="danger"
            size="small"
            class="opacity-0 group-hover:opacity-100 transition-opacity ml-2"
            :icon="Delete"
            circle
            :disabled="loadingIndex !== null"
            @click="handleDeleteItem(index)"
          />
        </div>
        <div 
          v-if="loadingIndex === index" 
          class="absolute inset-0 flex items-center justify-center bg-white bg-opacity-75"
        >
          <el-icon class="animate-spin text-primary-500">
            <Loading />
          </el-icon>
        </div>
      </div>
      <div class="mt-4 text-right">
        <el-button 
          type="danger" 
          size="small" 
          :disabled="loadingIndex !== null"
          @click="handleClear"
        >
          清空历史
        </el-button>
      </div>
    </div>
    <div v-else class="text-gray-500 text-center py-4">
      暂无查询历史
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { storage } from '../utils/storage'
import { Delete, Loading } from '@element-plus/icons-vue'
import { ElMessageBox } from 'element-plus'

const history = ref([])
const loadingIndex = ref(null)
const emit = defineEmits(['select-history'])

onMounted(() => {
  history.value = storage.getHistory()
})

const handleSelect = async (item, index) => {
  if (loadingIndex.value !== null) return
  loadingIndex.value = index
  try {
    await emit('select-history', item)
  } finally {
    loadingIndex.value = null
  }
}

const handleDeleteItem = async (index) => {
  if (loadingIndex.value !== null) return
  try {
    await ElMessageBox.confirm(
      '确定要删除这条查询记录吗？',
      '删除确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    // 从历史记录中删除
    history.value.splice(index, 1)
    // 更新存储
    storage.updateHistory(history.value)
  } catch {
    // 用户取消删除
  }
}

const handleClear = async () => {
  if (loadingIndex.value !== null) return
  try {
    await ElMessageBox.confirm(
      '确定要清空所有查询历史吗？',
      '清空确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    storage.clearHistory()
    history.value = []
  } catch {
    // 用户取消清空
  }
}
</script>

<style scoped>
.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}
</style> 